<template>
  <div class="wrap-table">
    <div class="tips">
      <el-button :disabled="!listData.length" type="primary" @click="handlePrint" style="margin-right: 20px;">打印</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="pageOption.total">
      </el-pagination>
      <el-alert
        title="请使用谷歌chrome、微软edge或者其他浏览器的极速模式打印数据。"
        type="error"
        effect="dark"
      >
      </el-alert>
    </div>
    <div v-loading="loading" style="min-height: 200px;">
      <div v-for="(item, index) in listData" :key="item.id" class="data-item">
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
          <tr>
            <th colspan="4">企业检查档案</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td style="width: 15%;">主管部门</td>
            <td style="width: 35%;">{{ item.parentName }}</td>
            <td style="width: 15%;">部门名称</td>
            <td style="width: 35%;">{{ item.deptName }}</td>
          </tr>
          <tr>
            <td>企业名称</td>
            <td>{{ item.companyName }}</td>
            <td>单位地址</td>
            <td>{{ item.address }}</td>
          </tr>
          <tr>
            <td>主要负责人</td>
            <td>{{ item.fzr }}</td>
            <td>联系电话</td>
            <td>{{ item.fzrPhone }}</td>
          </tr>
          <tr>
            <td>安全人员</td>
            <td>{{ item.safeMember }}</td>
            <td>联系电话</td>
            <td>{{ item.safePhone }}</td>
          </tr>
          <tr>
            <td>检查日期</td>
            <td>{{ item.createTime }}</td>
            <td>检查人员</td>
            <td>{{ item.createrName }}</td>
          </tr>
          <tr v-if="!!item.typename">
            <td>企业检查类型</td>
            <td>{{ item.typename }}</td>
            <td>重点区域</td>
            <td>{{ item.imptArea }}</td>
          </tr>
          <tr v-else>
            <td>重点区域</td>
            <td colspan="3">{{ item.imptArea }}</td>
          </tr>
          </tbody>
        </table>
        <table v-if="!!item.typename" cellpadding="0" cellspacing="0" border="0">
          <thead>
          <tr>
            <th style="width: 4%;">序号</th>
            <th style="width: 20%;">企业检查内容</th>
            <th style="width: 8%;">是否符合要求</th>
            <th style="width: 18%;">整改内容</th>
            <th style="width: 20%;">现场照片</th>
            <th style="width: 10%;">复查是否合格</th>
            <th style="width: 20%;">复查照片</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(record, record_i) in item.recorddtlList" :key="record.id">
            <td>{{ record_i + 1 }}</td>
            <td>{{ record.companyContent }}</td>
            <td :style="`background: #${record.isOk === 1 ? 'fff' : 'ddd'}`">{{ record.isOk === 1 ? '是' : '否' }}</td>
            <td>{{ record.isOk === 1 ? '符合要求' : record.zgjy }}</td>
            <td style="text-align: center;">
              <img v-for="(img, img_i) in getImgs(3, record.photoList)" :key="img_i" :src="img" style="height: 100px;width: 100%;">
            </td>
            <td>{{ record.isOk === 0 ? status[record.status].label : '' }}</td>
            <td style="text-align: center;">
              <img v-for="(img, img_i) in getImgs(4, record.photoList)" :key="img_i" :src="img" style="height: 100px;width: 100%;">
            </td>
          </tr>
          <tr>
            <td colspan="7" style="text-align: center;">针对发现的安全隐患“举一反三”</td>
          </tr>
          </tbody>
        </table>
        <table v-else cellpadding="0" cellspacing="0" border="0">
          <thead>
          <tr>
            <th style="width: 4%;">序号</th>
            <th style="width: 20%;">检查问题</th>
            <th style="width: 8%;">隐患类别</th>
            <th style="width: 18%;">整改内容</th>
            <th style="width: 20%;">现场照片</th>
            <th style="width: 10%;">复查是否合格</th>
            <th style="width: 20%;">复查照片</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(record, record_i) in item.recorddtlList" :key="record.id">
            <td>{{ record_i + 1 }}</td>
            <td>{{ record.dangerInfo }}</td>
            <td>{{ record.typeName }}</td>
            <td>{{ record.content }}</td>
            <td style="text-align: center;">
              <img v-for="(img, img_i) in getImgs(3, record.photoList)" :key="img_i" :src="img" style="height: 100px;width: 100%;">
            </td>
            <td>{{ status[record.status].label }}</td>
            <td style="text-align: center;">
              <img v-for="(img, img_i) in getImgs(4, record.photoList)" :key="img_i" :src="img" style="height: 100px;width: 100%;">
            </td>
          </tr>
          <tr>
            <td colspan="7" style="text-align: center;">针对发现的安全隐患“举一反三”</td>
          </tr>
          </tbody>
        </table>
        <table cellpadding="0" cellspacing="0" border="0">
          <thead>
          <tr>
            <th style="width: 33.3%;">检查人员签字</th>
            <th style="width: 33.4%;">部门人员签字</th>
            <th style="width: 33.3%;">被检查企业签字</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <img :src="getSign(1, item)" style="width: 100%;height: auto;">
            </td>
            <td>
              <img :src="getSign(3, item)" style="width: 100%;height: auto;">
            </td>
            <td>
              <img :src="getSign(2, item)" style="width: 100%;height: auto;">
            </td>
          </tr>
          </tbody>
        </table>
        <div v-if="index !== listData.length - 1" class="break"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { listCompanyrecordWithDtl } from '@/api/system/companyrecord'
export default {
  data () {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      listData: [],
      loading: false,
      pageOption: {
        total: 0
      },
      status: {
        0: {
          label: '整改中'
        },
        1: {
          label: '合格'
        },
        2: {
          label: '不合格'
        },
        3: {
          label: '待复查'
        }
      }
    }
  },
  created() {
    this.queryParams = {
      ...this.queryParams,
      ...this.$route.query
    }
    console.log('options', this.$route.query, this.queryParams, Object.keys(this.queryParams))
    if (Object.keys(this.queryParams).length > 2) {
      this.getData(this.queryParams)
    }
  },
  methods: {
    handlePrint() {
      window.print()
    },
    getData(params) {
      this.loading = true
      listCompanyrecordWithDtl(params).then(res => {
        this.listData = res.rows
        this.loading = false
        this.pageOption.total = res.total
      })
    },
    getImgs(type, data) {
      const arr = data.filter(item => item.type === type)
      const imgs = arr.map(item => item.imgUrl)
      return imgs
    },
    getSign(type, data) {
      if (data.status === 0 || data.status === 3) {
        return data['todoSign' + type]
      }
      if (data.status === 1) {
        return data['okSign' + type]
      }
      if (data.status === 2) {
        return data['nookSign' + type]
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val
      this.getData(this.queryParams)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val
      this.getData(this.queryParams)
    }
  }
}
</script>
<style scoped lang="scss">
.wrap-table{padding: 40px;width: 50%;min-width: 1000px;margin: 0 auto;}
.wrap-table .tips{margin: 0 0 20px;display: flex;}
.wrap-table table{border: 1px solid #000;border-spacing:0;width: 100%;box-sizing: border-box;font-size: 12px;}
.wrap-table table tr{page-break-inside: avoid;}
.wrap-table table th{border: 1px solid #000;padding: 5px 10px;background: #eee;}
.wrap-table table td{border: 1px solid #000;padding: 5px 10px;}
.break{page-break-after: always;height: 20px;background: #aaa;}
</style>
